<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #app {
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        header {
            width: 100%;
            height: 44px;
            background: teal;
            z-index: 10;
        }
        main {
            height: calc(100% - 44px);
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            flex: 1;
        }
        .item {
            font-size: 12px;
            line-height: 30px;
            color: #aaa;
        }
        .item + .item {
            border-top: 1px solid;
        }
    </style>
    <style>
        .css-icon {
            display: inline-block;
            height: 1em; width: 1em;
            font-size: 20px;
            box-sizing: border-box;
            text-indent: -9999px;
            vertical-align: middle;
            position: relative;
        }
        .css-icon::before,
        .css-icon::after {
            content: '';
            box-sizing: inherit;
            position: absolute;
            left: 50%; top: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }


        .icon-upward::before {
            height: .65em; width: .65em;
            border-style: solid;
            border-width: 2px 0 0 2px;
            -ms-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
        }
        .icon-upward::after {
            height: .8em;
            border-left: 2px solid;
            top: 55%;
        }

        .icon-upward.active {
            transform: rotate(180deg);
            transition: transform .3s;
        }


        .pull-to-refresh-layer {
            height: 60px;
            margin-top: -60px;
            font-size: 12px;
            text-align: center;
            color: #aaa;
            line-height: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <header></header>
    <main>
        <div ref="container">
            <div class="pull-to-refresh-layer">
                <div v-show="!isShowLoading">
                    <i ref="icon" class="css-icon icon-upward"></i>
                    <p>下拉刷新</p>
                </div>
                <div v-show="isShowLoading" style="padding-top: 30px;">
                    假装是个loading图标
                </div>
            </div>
            <div class="item" v-for="item in list" :key="item">{{item}}</div>
        </div>
    </main>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShowLoading: false
        },
        computed: {
            list() {
                return new Array(100).fill(0).map((item, index) => index)
            }
        },
        mounted() {
            this.pullRefresh(this.$refs.container, (done) => {
                setTimeout(() => {
                    done()
                }, 1000)
            })
        },
        methods: {
            pullRefresh(el, callback) {
                let beginPagY = 0
                let currentPos
                const maxTranslateY = 150
                const iconEl = this.$refs.icon
                el.addEventListener('touchstart', e => {
                    if (el.scrollTop !== 0) {
                        return
                    }
                    beginPagY = e.touches[0].pageY
                    e.preventDefault()
                })
                el.addEventListener('touchmove', e => {
                    if (el.scrollTop !== 0) {
                        return
                    }
                    const pageY = e.touches[0].pageY
                    const distance = currentPos = pageY - beginPagY
                    if (distance < 0 || distance > maxTranslateY) {
                        // 上拉的时候不做任何处理
                        return;
                    }
                    if (distance > 60) {
                        iconEl.classList.add('active')
                        console.log(iconEl.classList);
                    } else {
                        iconEl.classList.remove('active')
                    }
                    e.preventDefault()
                    el.style.transform = `translateY(${distance}px)`
                })
                let clear = () => {
                    this.isShowLoading = false
                    el.style.transform = `translateY(0)`
                    setTimeout(() => {
                        el.style.transition = ``
                    }, 200)
                }
                el.addEventListener('touchend', () => {
                    el.style.transition = `.2s`
                    if (currentPos >= 60) {
                        this.isShowLoading = true
                        el.style.transform = `translateY(30px)`
                        callback && callback(() => {
                            clear()
                        })
                        return
                    }
                    clear()
                })
            }
        }
    })
</script>
</body>
</html>
